<template>
  <!-- 出口订单费用 -->
  <c-main-template minHeight="auto" :isBreadcrumb="false" class="mt-24">
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">流水号：</div>
          <el-input
            size="large"
            placeholder="请输入出口申请号、订单号"
            v-model="querys.innerId"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">费用类型：</div>
          <el-select
            v-model="querys.typeList"
            multiple
            size="large"
            class="wh flex-1 mr-lg"
            placeholder="请选择费用类型"
          >
            <el-option
              v-for="item in exportOrderExpenseType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>

      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">状态：</div>
          <el-select
            v-model="querys.statusList"
            multiple
            size="large"
            class="wh flex-1 mr-lg"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in billType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mt-24"
    minHeight="auto"
    title="订单费用"
    :isBreadcrumb="false"
  >
    <template #operate>
      <el-button size="large" type="primary" @click="handlePayment"
        >批量支付</el-button
      >
    </template>
    <c-table-template
      ref="multipleTableRef"
      :row-key="getRowKey"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        align="center"
        width="55"
        :selectable="onCheckSelectable"
        :reserve-selection="true"
      />
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="费用类型" align="center" width="300">
        <template #default="scope">
          {{ getStatusLabel(expenseType, scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column
        label="费用说明"
        prop="details"
        align="center"
        min-width="300"
      />

      <el-table-column label="支付金额（元）" align="center" width="300">
        <template #default="scope">
          {{ filters.thousands(scope.row.amount) }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="left" width="180">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column
        label="流水号"
        prop="innerId"
        align="center"
        min-width="200"
      />
      <el-table-column
        prop="timeCreate"
        label="状态"
        align="center"
        width="300"
      >
        <template #default="scope">
          {{ getStatusLabel(billType, scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handleDetails(scope.row)"
          >
            <span>查看明细</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="table-footer">
      <span>共选择 {{ sumNumber }} 项 , 共计</span>
      <span style="color: rgb(255, 99, 85)"
        >￥{{ filters.thousands(sumAccount) }}</span
      >
    </div>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
  <c-extra-charges ref="cExtraChargesRef" />
  <c-export-charges ref="cExportChargesRef" />
  <c-bulk-payment :type="0" ref="cBulkPaymentRef" @change="onPaymentSuccess" />
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { useRoute } from "vue-router";
import {
  billType,
  expenseType,
  exportOrderExpenseType,
  getStatusLabel,
} from "@/utils/status.js";
import cExtraCharges from "../components/ExtraCharges.vue";
import cExportCharges from "../components/ExportCharges.vue";
import cBulkPayment from "../components/BulkPayment.vue";
import { useBillHooks } from "../components/index.js";
const { proxy } = getCurrentInstance();
const route = useRoute();

onMounted(() => {
  const item = route.query;
  if (item && item.key && item.key * 1 === 0) {
    if (item.id) {
      querys.value.innerId = item.id;
      delete route.query.id;
    }
    if (item.status) {
      querys.value.statusList = [item.status*1];
      delete route.query.status;
    }
    delete route.query.key;
  }
});
const onPaymentSuccess = () => {
  if (multiples.value.length > 0) {
    multiples.value = [];
    multipleTableRef.value.tableRef.clearSelection();
  }
  tableList();
};
const handleReset = () => {
  querys.value = {
    current: 1,
    size: 10,
  };
  if (multiples.value.length > 0) {
    multiples.value = [];
    multipleTableRef.value.tableRef.clearSelection();
  }
  tableList();
};
const handleDetails = async (item) => {
  const url = "/sellerBill/getDetail";
  const params = {
    id: item.id,
  };
  try {
    loading.value = true;
    const res = await proxy.$get({ url, params });
    getDetailOpen(item.type, res);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

const {
  cExtraChargesRef,
  cExportChargesRef,
  cBulkPaymentRef,
  multipleTableRef,
  multiples,
  sumNumber,
  sumAccount,
  getDetailOpen,
  handlePayment,
  getRowKey,
  onCheckSelectable,
  handleSelectionChange,
} = useBillHooks();
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/sellerBill/sellerPage",
  getParams: () => {
    const params = {};
    if (querys.value.typeList && querys.value.typeList.length > 0) {
      params.typeList = querys.value.typeList.join(",");
    }
    if (querys.value.statusList && querys.value.statusList.length > 0) {
      params.statusList = querys.value.statusList.join(",");
    }
    return params;
  },
});
</script>
<style lang="less" scoped>
.table-footer {
  background: rgb(241, 241, 241);
  color: rgb(32, 32, 32);
  font-size: 14px;
  font-weight: 500;
  border-bottom: var(--el-table-border);
  padding: 12px 16px;
}
</style>